/**
 * 运行webpack指令的时候加载这里的配置
 * 模块化默认采用commonjs，因为基于nodejs运行
 */

// 拼接绝对路径的方法
const { resolve } = require('path')

module.exports = {
  // 入口起点
  entry: './src/index.js',
  // 输出
  output: {
    // 输出文件名
    filename: 'built.js',
    // 输出路径
    path: resolve(__dirname, 'build'),
  },
  // loader的配置
  module: {
    // 详细的配置
    rules: [
      {
        // 匹配的文件种类
        test: /\.css$/,
        // 使用哪个loader处理
        use: [
          // use中loader执行顺序：从右到左，从下到上 依次执行。
          // 创建style标签，将js中的样式资源嵌入，添加到head中生效。
          'style-loader',
          // 将css变成commonjs模块加载到js中，内容是样式字符串
          'css-loader',
        ],
      },
      {
        // 匹配less文件
        test: /\.less$/,
        // 使用哪个loader处理
        use: [
          // use中loader执行顺序：从右到左，从下到上 依次执行。
          // 创建style标签，将js中的样式资源嵌入，添加到head中生效。
          'style-loader',
          // 将css变成commonjs模块加载到js中，内容是样式字符串
          'css-loader',
          // 加载顺序，这里是最后一个最先加载
          // 被转化为css。然后上面的css-loader再处理。
          'less-loader',
        ],
      },
    ],
  },
  // plugins的配置
  plugins: [],
  // 模式，开发或者生产
  mode: 'development',
  // mode: 'production',
}
